import React from 'react';
import {StyleSheet, View, Image, Text, TouchableOpacity, Button} from "react-native";
import {Dimensions} from 'react-native';

const screenWidth = Dimensions.get('window').width;
type ItemProp = {
    body:any,
    onSend:(body: any)=> void
}
class CustomerGoodItem extends React.Component<ItemProp, any>  {
    constructor(props:ItemProp) {
        super(props);
    }

    render() {
        let body = this.props.body;
        let viewWith = {
            maxWidth: screenWidth - 10*2 - 56 - 10*2  // 最大宽度 = 屏幕宽度 - 左右边框宽度 - 头像宽度 - 左右消息间距
        };
        let textContainerWith = {
            maxWidth: viewWith.maxWidth - 8*2 - 60  // 文字宽度 = 最大宽度 - 左右边框宽度 - 缩略图宽度
        };
        return (
            <View style={styles.rowItem}>
                <View style={[styles.rowItemGood, viewWith]}>
                    <Image style={styles.rowItemGoodImage} source={{ uri: body.thumbnailUrl }} />
                    <View style={styles.rowItemGoodContainer}>
                       <Text  numberOfLines={3} ellipsizeMode={'tail'} style={[styles.rowItemGoodText, textContainerWith]} >{body.title}</Text>
                    </View>
                </View>
                <View style={styles.rowItemPrice}>
                    <Text>{'金额:' + body.price + '元'}</Text>
                    <Button title={'发送'} onPress={()=>this.props.onSend(body)}/>
                </View>
            </View>
        );
    }
}


export {
    CustomerGoodItem,
    CustomerGoodItem as CustomerOrderItem
}

const styles = StyleSheet.create({
    rowItem: {
        display:'flex',
        flexDirection:'column',

        flex:1,
        marginLeft:10,
        minWidth:200,
        borderColor:'#ebeef5',
        backgroundColor:'#fff',
        boxShadow:'0 2px 12px 0 rgba(0,0,0,.1)',
        borderRadius: 8,
    },
    rowItemGood: {
        display:'flex',
        flexDirection:'row',
        // justifyContent:'space-between',
        alignItems:'center',
        margin:8
    },
    rowItemGoodImage: {
        width: 60,
        height:56
    },
    rowItemGoodContainer: {
        alignSelf: 'flex-start',
        // maxWidth: 200,
    },
    rowItemGoodText: {
        maxHeight:60,
        marginLeft:4,
        overflow: 'hidden',
        paddingBottom:4
    //    文字省略号
    },
    rowItemPrice: {
        display:'flex',
        flexDirection:'row',
        justifyContent:'space-between',
        alignItems:'center',
        margin:8,
        marginTop: 0
    },
    // btnSend:{
    //     textAlign:'center'
    // },

});
